<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link href="../asserts/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="../asserts/plugins/jquery-3.6.0.min.js"></script>
    <script src="../asserts/plugins/bootstrap/js/bootstrap.js"></script>
    <script>
        $(function () {

            //获取商品详情（显示评论区）
            let id = location.href.split("=")[1];
            function init(){
                $.ajax({
                    url:"/KunKunMarket/CommodityController",
                    type:"get",
                    dataType:"json",
                    data:{
                        type: 'CommodityDetailed',
                        commodity_id: id
                    },
                    success:function (respBean) {
                        //展示商品
                        $("#commodityList").find("#commodity_img").attr("src",respBean.data.commodity.img_url);
                        $("#commodityList").find("#commodity_name").text(respBean.data.commodity.name);
                        $("#commodityList").find("#commodity_price").text(respBean.data.commodity.price);
                        $("#commodityList").find("#commodity_stock").text(respBean.data.commodity.stock)
                        $("#commodityList").find("#commodity_id").text(respBean.data.commodity.id)
                        $("#commodityList").find("#commodity_user_id").text(respBean.data.commodity.user_id);

                        //展示评论
                        $(".commentList").text('');
                        for (let i=0; i<respBean.data.comments.length; i++){
                            console.log(respBean.data.comments[i]);
                            let $li = $(`
                            <li class="list-group-item" style="padding: 15px;font-size: 20px">
                                <span id="text">垃圾，别买************************************</span>
                                <p style="float: right">
                                    <span >发言用户：</span>
                                    <span id="user_id" >1001</span>
                                </p>
                            </li>
                        `);
                            $li.find("#text").text(respBean.data.comments[i].text);
                            $li.find("#user_id").text(respBean.data.comments[i].user_id);
                            $(".commentList").append($li);
                        }
                    }
                })
            }
            init();

            //发表评论
            $("#publish_btn").click(function () {
                console.log();
                $.ajax({
                    url: "/KunKunMarket/CommodityController",
                    type: "get",
                    dataType: "json",
                    data: {
                        type: 'addComment',
                        text: $("#publish_text").val(),
                        commodity_id: id
                    },
                    success: function (respBean) {
                        if (respBean.status == 200){
                            init();
                        }else {
                            alert(respBean.msg);
                        }
                    }
                })
            })

            //呼出购买商品的表单时，填充数据
            $(".addOrder_btn").click(function(){
                //获取到商品id, 设置到表单的异常域中
                let commodity_id = $(this).parents(".caption").find("#commodity_id").text();
                $("input[name=commodity_id]").val(commodity_id);
            })
            //购买商品，生成订单
            $("button[name=addOrder]").click(function () {
                $.ajax({
                    url:"/KunKunMarket/OrderController",
                    type:"get",
                    dataType:"json",
                    data: {
                        type:'addOrder',
                        commodity_id: $("input[name=commodity_id]").val(),
                        phone: $("input[name=phone]").val(),
                        address: $("input[name=address]").val(),
                        password: $("input[name=password]").val()
                    },
                    success:function (respBean) {
                        alert(respBean.msg);
                        if (respBean.status == 200){
                            $(".cel").click();
                        }
                    }
                })
            })

            //添加到购物车
            $(".addCart_btn").click(function () {
                //获取到商品id, 设置到表单的异常域中
                let commodity_id = $(this).parents(".caption").find("#commodity_id").text();
                $.ajax({
                    url:"/KunKunMarket/CartController",
                    type:"get",
                    dataType:"json",
                    data: {
                        type:'addCart',
                        commodity_id: commodity_id
                    },
                    success:function (respBean) {
                        alert(respBean.msg);
                    }
                })
            })


        })
    </script>
</head>
<body>
    <!--    展示商品-->
    <div class="container">
        <div class="row" id="commodityList">
            <div class="col-lg-12 col-md-8 col-sm-12 col-xs-12">
                <div class="thumbnail">
                    <img id="commodity_img" style="display: inline-block;width: 255px;height: 290px" src="../asserts/img/1673342375030323477.jpg" alt="..."class="img-responsive">
                    <div class="caption" style="float: right; width: 770px;height: 290px ;">
                        <h4 id="commodity_name" style="font-size: 40px">华为畅享7</h4>
                        <p style="color:red;">
                            <span style="font-size: 18px">价格：</span> <span id="commodity_price" ></span>
                        </p>
                        <p id="commodity_stock" style="display: none"> </p>
                        <p id="commodity_id" style="color:red;display: none"></p>
                        <p id="commodity_user_id" style="color:red;display: none"></p>
                        <button data-target="#tanChuang"  class="addOrder_btn btn btn-default btn-lg" style="margin-top:20px;width: 75px" data-toggle="modal">购买</button><br>
                        <button class="addCart_btn btn btn-primary " style="margin-top: 20px">添加到购物车</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!--    展示评论-->
    <div class="container">
        <ul class="list-group commentList" >
            <li class="list-group-item" style="padding: 15px;font-size: 20px">
                <span id="text">垃圾，别买************************************</span>
                <p style="float: right">
                    <span >发言用户：</span>
                    <span id="user_id" >1001</span>
                </p>
            </li>
        </ul>
    </div>
    </div>

<!--    发表评论-->
    <div class="container">
        <textarea id="publish_text" class="form-control" rows="3"></textarea>
        <button id="publish_btn" type="button" class="btn btn-primary btn-lg">发表评论</button>
    </div>

    <!--fade 弹出表单,购买商品-->
    <div class="modal fade"  id="tanChuang" aria-labelledby="myModallabel" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h5 class="modal-title" id="myModallabel">请填写收货信息</h5>
                </div>
                <form id="formData" class="form-horizontal">
                    <input type="hidden" name="commodity_id">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label col-lg-2">密码：</label>
                            <div class="col-lg-9">
                                <input type="password" value="" name="password" class="form-control"></br>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-2">电话：</label>
                            <div class="col-lg-9">
                                <input type="text" value="" name="phone" class="form-control"></br>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-2">地址：</label>
                            <div class="col-lg-9">
                                <input type="text" value="" name="address" class="form-control">
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button class="cel btn btn-default" type="button" data-dismiss="modal">取消</button>
                        <button class="btn btn-success" type="button" name="addOrder">确认</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</body>
</html>